import React, {useState } from 'react'
import 'antd/dist/antd.css'
import {Card,Input,Button,Spin,message} from 'antd'
import {
    UserOutlined,
    KeyOutlined


  } from '@ant-design/icons';
import '../static/css/Login.css'
import servicePage from '../config/apiUrl'
import axios from 'axios'

export default function Login(props){
    // console.log(props)
    const [userName,setUserName] = useState('')
    const [Password,setPassword] = useState('')
    const [isLoading,setIsLoading] = useState('')
    const checkLogin = ()=>{
        setIsLoading(true)
        if(!userName){
            message.error('用户名不能为空')
            setTimeout(()=>{setIsLoading(false)},500)
            return false
        }else if(!Password){
            message.error('密码不能为空')
            setTimeout(()=>{setIsLoading(false)},500)
            return false
        }
        let dataProps={
            'userName':userName,
            'password':Password
        }
        axios({
            method:'post',
            url:servicePage.checkLogin,
            data:dataProps,
            withCredentials:true
        }).then(
            res=>{
                setIsLoading(false)
                if(res.data.date=='登陆成功'){
                    // console.log(res.data.openId)
                    localStorage.setItem('openId',res.data.openId)
                props.history.push('/AdminIndex')
                }else{
                    // console.log(res)
                    message.error('用户名或者密码错误')
                }
            }
        )
    }

    return (
        <div className ='login-div'>
            <Spin type='Loading...' spinning={isLoading}>
                <Card title='后台登录系统界面' bordered={true} style={{width:400}}>
                    <Input 
                    id='usrName'
                    size = 'large'
                    placeholder = 'Enter Your UsrName'
                    prefix ={<UserOutlined style={{color:'rgba(0,0,0,.25)'}}/>} 
                    onChange={(e)=>{
                        setUserName(e.target.value)
                    }}
                    ></Input>
                    <br/><br/>
                    <Input.Password
                    id='password'
                    size = 'large'
                    placeholder = 'Enter Your Password'
                    prefix ={<KeyOutlined style={{color:'rgba(0,0,0,.25)'}}/>} 
                    onChange={(e)=>{
                        setPassword(e.target.value)
                    }}
                    ></Input.Password>
                    <br/><br/>
                    <Button type="primary" size = 'large' block onClick={checkLogin}>Login</Button>
                </Card>
             </Spin>
        </div>
    )
}